<template>
  <div class="wrap" ref="workingRef">
    <!-- 查询 -->
    <el-card>
      <!-- 表单搜索 -->
      <el-form
        size="mini"
        ref="batchJsForm"
        label-width="110px"
        label-position="right"
        :model="queryDetailParam"
      >
        <!-- 表头查询 -->
        <!-- 第一行 -->
        <el-row type="flex" justify="space-between">
          <el-col :span="5">
            <el-form-item label="调度:">
              <el-select
                v-model="queryDetailParam.regulationOrgId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in dispatchList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <!-- 类型 -->
            <el-form-item label="类型:">
              <el-select
                v-model="queryDetailParam.stationType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in stationTypeLists"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="场站名称：">
              <el-input
                v-model.trim="queryDetailParam.stationName"
                clearable
                maxlength="40"
                placeholder="输入场站名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单机容量范围：">
              <el-input
                v-model.trim="queryDetailParam.singleCapStart"
                clearable
                type="number"
                style="width: calc(50% - 32px)"
                oninput="value= value.length>40?value.slice(0,40):value"
              />
              <span style="padding-right: 8px; padding-left: 8px">-</span>
              <el-input
                v-model.trim="queryDetailParam.singleCapEnd"
                clearable
                type="number"
                style="width: calc(50% - 32px)"
                oninput="value= value.length>40?value.slice(0,40):value"
              />
              <span class="unitClass">MW</span>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row justify="space-between">
          <el-col :span="5">
            <!-- 调度 -->
            <el-form-item label="产权单位:">
              <el-input
                v-model.trim="queryDetailParam.companyName"
                clearable
                maxlength="40"
                placeholder="输入产权单位"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" align="right">
            <el-button
              style="margin-left: 18%"
              size="mini"
              type="primary"
              @click="searchList"
              >检索</el-button
            >
            <el-button size="mini" @click="resetSearchList">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card style="margin-top: 20px">
      <CleanForm
        :searShow="true"
        :showColumnHandle="false"
        :api="queryCommonStationUnitsInfo"
        :queryParam="queryDetailParam"
        :fieldList="headList"
        :tableOptionWidth="200"
        :showColumnSetting="false"
        :page="false"
        :dialogPage="true"
        :showExportBtn="false"
        :isShow="true"
        :tableHeight="'540px'"
        ref="conventionalUnitTable"
      >
        <template slot="tableTopOptionRight">
          <!-- 这里是写表格上方的按钮 -->
          <div>
            <span class="operateButton" @click="addWindPower" operate="add"
              ><img src="@/assets/icon/389.png" /> 新增</span
            >
            <span
              class="operateButton b-border"
              @click="copyWindPower()"
              operate="copy"
              ><img src="@/assets/icon/394.png" /> 复制</span
            >
            <span
              class="operateButton b-border"
              @click="editWindPower()"
              operate="edit"
              ><img src="@/assets/icon/392.png" /> 编辑</span
            >
            <span
              class="operateButton b-border"
              @click="deleteWindPower"
              operate="delete"
              ><img src="@/assets/icon/393.png" /> 删除</span
            >
            <span
              class="operateButton b-border"
              @click="exportExcel()"
              operate="export"
              ><img src="@/assets/icon/395.png" /> 导出</span
            >
          </div>
        </template>
      </CleanForm>
    </el-card>
    <!-- 新增弹框 -->
    <!-- 加一个<div v-if="dialogFormVisible">是保证在打开子组件弹窗的时候，保证每次都执行created() -->
    <div v-if="dialogFormVisible">
      <!-- width="1500px"  写成px，不写成%，是因为放大的时候可以有滚动条 -->
      <!-- <el-dialog
        :title="addDialogVisibleTitle"
        :visible.sync="dialogFormVisible"
        width="80%"
        :append-to-body=true
        top="7vh"
      > -->
      <el-dialog
        :title="addDialogVisibleTitle"
        :visible.sync="dialogFormVisible"
        width="1500px"
        top="7vh"
        class="test"
        :append-to-body="true"
      >
        <test-result-edit
          :detailForm="getFrom"
          ref="childRules"
          :key="id"
          :operate="operate"
          :dispatchList="dispatchList"
          :stationTypeLists="stationTypeLists"
        ></test-result-edit>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="saveForm()">{{
            this.addDialogVisibleTitle == '编辑' ? '确认编辑' : '确认新增'
          }}</el-button>
          <el-button
            type="primary"
            v-if="this.addDialogVisibleTitle != '编辑'"
            size="small"
            @click="resetCon()"
            >重置
          </el-button>
          <el-button size="small" @click="dialogFormVisible = false"
            >退出
          </el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 预览弹框 -->
    <el-dialog
      title="预览"
      top="7vh"
      width="70%"
      :visible.sync="dialogPreVisible"
      @close="
        () => {
          pdf = ''
        }
      "
    >
      <iframe
        style="width: 100%; height: 450px"
        frameborder="0"
        width="100%"
        height="620px"
        :src="pdf"
        v-if="pdf"
        type="application/x-google-chrome-pdf"
        ref="previewFrame"
      ></iframe>
      <div
        class="table-html-wrap"
        v-if="!pdf"
        style="width: 100%; height: 420px; overflow: auto"
        id="tableHtml"
      ></div>
    </el-dialog>
  </div>
</template>
<script>
import TestResult from './testResult.js'
export default TestResult
</script>
<style lang="scss" scoped>
.table-html-wrap {
  overflow: hidden;
  overflow-y: auto;
}

.table-html-wrap ::v-deep table {
  // color: red;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-collapse: collapse;
  margin: auto;
}

.table-html-wrap ::v-deep table td {
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  white-space: nowrap;
  text-align: center;
  padding: 0.5rem;
}

.table-html-wrap ::v-deep tbody tr:nth-of-type(1) {
  font-weight: bold;
  font-size: 20px;
}
.dialog-footer {
  text-align: end;
}
.wrap {
  //width: 1528px;
  // height: 1080px;
  width: 100%;
  height: 100%;
  // background-color: rgb(195, 188, 241);
}

.title {
  border: 1px solid grey;
  border-radius: 4px;
  width: 200px;
  text-align: center;
}

/* 去掉页码的显示每页的下拉框 */
::v-deep .el-pagination__sizes .el-select {
  display: none !important;
}
::v-deep .page-wrap-fixed {
  text-align: center !important;
}

.operateButton {
  cursor: pointer;
  font-size: 12px !important;
  padding: 8px;
  img {
    transform: translateY(-2px);
  }
}
.operateButton::after {
  display: inline-block;
  content: '';
  width: 1px;
  height: 18px;
  margin: 0 3px;
  transform: translate(6px, 3px);
  background: #000;
}
.operateButton:last-child::after {
  display: none;
}

::v-deep .el-select--mini {
  width: 100%;
}

.unitClass {
  font-size: 12px !important;
  margin-left: 5px;
}

::v-deep .el-select-dropdown {
  position: absolute !important;
  top: 80% !important;
  left: 0px !important;
}
</style>
